<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Amaze UI Admin table Examples</title>
  <meta name="description" content="这是一个 table 页面">
  <meta name="keywords" content="table">
  <% include("/common/inc/_css.html"){} %>
  <link rel="stylesheet" href="${ctxPath}/layui/css/layui.css" media="all" />
</head>
<body>
<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->
<% include("/common/inc/_header.html"){} %>
<div class="am-cf admin-main">
  <!-- sidebar start -->
 <% include("/common/inc/_menu.html"){} %>
  <!-- sidebar end -->

  <!-- content start -->
  <div class="admin-content">
    <div class="admin-content-body">
      <div class="am-cf am-padding am-padding-bottom-0">
        <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">线索池统计</strong> / <small>CluePoolECharts</small></div>&nbsp;&nbsp;
        <a href="${ctxPath}/clue/list"><button type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 线索</button>   </a>  &nbsp;&nbsp;  
         <a href="${ctxPath}/cluePool/list"><button type="button" class="am-btn am-btn-default"><span class="am-icon-archive"></span> 线索池</button>   </a>  &nbsp;&nbsp;  
      </div>

      <hr>
      
       <div class="am-g">
        <div class="am-u-sm-12 am-u-md-6">
          <div class="am-btn-toolbar">
            <div class="am-btn-group am-btn-group-xs">
            <a href="${ctxPath}/clue/ECharts/"><button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 全部统计</button></a>
              <a href="${ctxPath}/clue/ECharts/clueECharts"><button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 线索统计</button></a>
			 
			  </div>
          </div>
        </div>
         <br/><br/><br/><br/>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
	<div id="eChartsDate" style="width: 600px; height: 400px;"></div><br/>
	<div id="eChartsDateAll" style="width: 600px; height: 400px;"></div><br/>
	<div id="eChartsCreate" style="width: 600px; height: 400px;"></div>
	
 <footer class="admin-content-footer">
      <hr>
      <p class="am-padding-left">© 2014 AllMobilize, Inc. Licensed under MIT license.</p>
    </footer>
</div>
</div>
</div>

  </div>
  <!-- content end -->

	<%
		var xEChartsDate = "[";
		var yEChartsDate = "[";	
		
		if(eChartsDate.~size!=0){
			for(var item in eChartsDate!) {
				xEChartsDate = xEChartsDate  +"'"+ item.dateOfContract +"',";
				yEChartsDate = yEChartsDate + item.numCount +",";
			}
			var xIndex = strutil.lastIndex(xEChartsDate,",");
			var yIndex = strutil.lastIndex(yEChartsDate,",");
			xEChartsDate = strutil.subStringTo(xEChartsDate,0,xIndex);
			yEChartsDate = strutil.subStringTo(yEChartsDate,0,yIndex);
		}
			xEChartsDate = xEChartsDate +"]";
			yEChartsDate = yEChartsDate +"]";
		// ------------
		
		var xEChartsDateAll = "[";
		var yEChartsDateAll = "[";	
		
		if(eChartsDateAll.~size!=0){
			for(var item in eChartsDateAll!) {
				xEChartsDateAll = xEChartsDateAll  +"'"+ item.dateOfContract +"',";
				yEChartsDateAll = yEChartsDateAll + item.numCount +",";
			}
			
			var xIndex2 = strutil.lastIndex(xEChartsDateAll,",");
			var yIndex2 = strutil.lastIndex(yEChartsDateAll,",");
			xEChartsDateAll = strutil.subStringTo(xEChartsDateAll,0,xIndex2);
			yEChartsDateAll = strutil.subStringTo(yEChartsDateAll,0,yIndex2);
		}
		xEChartsDateAll = xEChartsDateAll +"]";
		yEChartsDateAll = yEChartsDateAll +"]";
		
		// ------------
		
		var xEChartsCreate = "[";
		var yEChartsCreate = "[";	
		if(eChartsCreate.~size!=0){
			for(var item in eChartsCreate!) {
				xEChartsCreate = xEChartsCreate  +"'"+ item.createName +"',";
				yEChartsCreate = yEChartsCreate + item.numCount +",";
			}
			
			var xIndex3 = strutil.lastIndex(xEChartsCreate,",");
			var yIndex3 = strutil.lastIndex(yEChartsCreate,",");
			xEChartsCreate = strutil.subStringTo(xEChartsCreate,0,xIndex3);
			yEChartsCreate = strutil.subStringTo(yEChartsCreate,0,yIndex3);
		}
		xEChartsCreate = xEChartsCreate +"]";
		yEChartsCreate = yEChartsCreate +"]";
	%>
	<!-- 引入 ECharts 文件 -->
	<script src="${ctxPath}/assets/echarts/echarts.min.js"></script>

	
	<script type="text/javascript">
	

	// 基于准备好的dom，初始化echarts实例
    var eChartsDate = echarts.init(document.getElementById('eChartsDate'));
    var eChartsDateAll = echarts.init(document.getElementById('eChartsDateAll'));
    var eChartsCreate = echarts.init(document.getElementById('eChartsCreate'));

    // 指定图表的配置项和数据
    var eChartsDateOption = {
        title: {
            text: '线索池本周统计',
            subtext:'本周'
        },
        tooltip: {},
       /*  legend: {
            data:['本周']
        }, */
        xAxis: {
            data: ${xEChartsDate}
        },
        yAxis: {},
        series: [{
            name: '线索数',
            type: 'bar',
            data:${yEChartsDate}
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    eChartsDate.setOption(eChartsDateOption);
    
    // --------
    
     // 指定图表的配置项和数据
    var eChartsDateAllOption = {
        title: {
            text: '线索池日期统计',
            subtext:'日期'
        },
        tooltip: {},
       /*  legend: {
            data:['本周']
        }, */
        xAxis: {
            data: ${xEChartsDateAll}
        },
        yAxis: {},
        series: [{
            name: '线索数',
            type: 'bar',
            data:${yEChartsDateAll}
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    eChartsDateAll.setOption(eChartsDateAllOption);
    
    // -----------
    
     // 指定图表的配置项和数据
    var eChartsCreateOption = {
        title: {
            text: '线索池创建人统计',
            subtext:'创建人'
        },
        tooltip: {},
       /*  legend: {
            data:['本周']
        }, */
        xAxis: {
            data: ${xEChartsCreate}
        },
        yAxis: {},
        series: [{
            name: '线索数',
            type: 'bar',
            data:${yEChartsCreate}
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    eChartsCreate.setOption(eChartsCreateOption);
	
	</script>
</body>
</html>